<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('服务订单列表')" />
    <style>
        .tabs-container .tabs-left>.nav-tabs, .tabs-container .tabs-right>.nav-tabs {
            width: 8%;
        }

        .tabs-container .tabs-left .panel-body {
            width: 94%;
            margin-left: 8%;
        }
        /*.tabs-container .tabs-right .panel-body {
            width: 94%;
            margin-right: 6%;
        }*/
    </style>
</head>
<body class="gray-bg">
     <div class="container-div">
         <div class="tabs-container">
             <div class="tabs-left">
                 <ul class="nav nav-tabs">
                     <li class="active"><a data-toggle="tab" href="#tab-8" onclick="changeTypeAll()"> 全部工单</a>
                     </li>
                     <li class=""><a data-toggle="tab" href="#tab-9" onclick="changeType('2')"> 厂家售后单</a>
                     </li>
                     <li class=""><a data-toggle="tab" href="#tab-9" onclick="changeType('4')"> 厂家返修单</a>
                     </li>
                     <li class=""><a data-toggle="tab" href="#tab-9" onclick="changeType('1')"> 个人用户单</a>
                     </li>
                     <li class=""><a data-toggle="tab" href="#tab-9" onclick="changeType('3')"> 厂家保外单</a>
                     </li>
                     <li class=""><a data-toggle="tab" href="#tab-9" onclick="changeReminder('0')"> 催单工单</a>
                     </li>
                 </ul>
                 <div class="tab-content ">
                     <div id="tab-8" class="tab-pane active">
                         <div class="panel-body">
                                 <div class="col-sm-12 search-collapse">
                                     <form id="formId">
                                         <div class="select-list">
                                             <ul>
                                                 <li>
                                                     <label style="width: 100px">工单号：</label>
                                                     <input type="text" name="id"/>
                                                 </li>
                                                 <li>
                                                     <label style="width: 100px">下单人电话：</label>
                                                     <input type="text" name="orderUserPhone"/>
                                                 </li>
                                                 <li>
                                                     <label>地址：</label>
                                                     <input type="text" name="userAddress"/>
                                                 </li>
                                                 <li>
                                                     <label>联系人：</label>
                                                     <input type="text" name="userName"/>
                                                 </li>
                                                 <li>
                                                     <label>联系电话：</label>
                                                     <input type="text" name="userPhone"/>
                                                 </li>
                                                 <li>
                                                     <label style="width: 100px">预约单状态：</label>
                                                     <select name="orderState" th:with="type=${@dict.getType('order_state')}">
                                                         <option value="">所有</option>
                                                         <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                                     </select>
                                                 </li>
                                                 <!--<li>
                                                     <label>工单分类：</label>
                                                     <select name="orderType" th:with="type=${@dict.getType('order_type')}">
                                                         <option value="">所有</option>
                                                         <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                                     </select>
                                                 </li>-->
                                                 <li>
                                                     <label>接单师傅：</label>
                                                     <input type="text" name="repairStoreName"/>
                                                 </li>
                                                 <!--<li>
                                                     <label>是否加急：</label>
                                                     <select name="isPriority" th:with="type=${@dict.getType('sys_yes_no')}">
                                                         <option value="">所有</option>
                                                         <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                                     </select>
                                                 </li>-->
                                                 <li class="select-time">
                                                     <label style="width: 120px;">订单创建时间：</label>
                                                     <input type="text" class="time-input" id="startTime1" placeholder="开始时间" name="params[beginCreateTime]"/>
                                                     <span>-</span>
                                                     <input type="text" class="time-input" id="endTime1" placeholder="结束时间" name="params[endCreateTime]"/>
                                                 </li>
                                                 <li>
                                                     <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('formId', 'bootstrap-table')"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                                     <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('formId', 'bootstrap-table')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                                 </li>
                                             </ul>
                                         </div>
                                     </form>
                                 </div>

                                 <!--<div class="btn-group-sm" id="toolbar" role="group">
                                     <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="zsyh:serviceOrder:add">
                                         <i class="fa fa-plus"></i> 添加
                                     </a>
                                     <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="zsyh:serviceOrder:edit">
                                         <i class="fa fa-edit"></i> 修改
                                     </a>
                                     <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="zsyh:serviceOrder:remove">
                                         <i class="fa fa-remove"></i> 删除
                                     </a>
                                     <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="zsyh:serviceOrder:export">
                                         <i class="fa fa-download"></i> 导出
                                     </a>
                                 </div>-->
                                 <div class="col-sm-12 select-table table-bordered">
                                     <table id="bootstrap-table"></table>
                                 </div>
                         </div>
                     </div>
                     <div id="tab-9" class="tab-pane">
                         <div class="panel-body">
                             <div class="col-sm-12 search-collapse">
                                 <form id="formId2">
                                     <div class="select-list">
                                         <ul>
                                             <li>
                                                 <label style="width: 100px">工单号：</label>
                                                 <input type="text" name="id"/>
                                             </li>
                                             <li>
                                                 <label style="width: 100px">下单人电话：</label>
                                                 <input type="text" name="orderUserPhone"/>
                                             </li>
                                             <li>
                                                 <label>地址：</label>
                                                 <input type="text" name="userAddress"/>
                                             </li>
                                             <li>
                                                 <label>联系人：</label>
                                                 <input type="text" name="userName"/>
                                             </li>
                                             <li>
                                                 <label>联系电话：</label>
                                                 <input type="text" name="userPhone"/>
                                             </li>
                                             <li>
                                                 <label style="width: 100px">预约单状态：</label>
                                                 <select name="orderState" th:with="type=${@dict.getType('order_state')}">
                                                     <option value="">所有</option>
                                                     <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                                 </select>
                                             </li>
                                             <li>
                                                 <label style="width: 100px">是否拒修：</label>
                                                 <select name="refuseRepair" th:with="type=${@dict.getType('zsyh_yesno')}">
                                                     <option value="">所有</option>
                                                     <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                                 </select>
                                             </li>
                                             <!--<li>
                                                 <label>工单分类：</label>
                                                 <select name="orderType" th:with="type=${@dict.getType('order_type')}">
                                                     <option value="">所有</option>
                                                     <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                                 </select>
                                             </li>-->
                                             <li>
                                                 <label>接单师傅：</label>
                                                 <input type="text" name="repairStoreName"/>
                                             </li>
                                             <li class="select-time">
                                                 <label style="width: 120px;">订单创建时间：</label>
                                                 <input type="text" class="time-input" id="startTime2" placeholder="开始时间" name="params[beginCreateTime]"/>
                                                 <span>-</span>
                                                 <input type="text" class="time-input" id="endTime2" placeholder="结束时间" name="params[endCreateTime]"/>
                                             </li>
                                             <li>
                                                 <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('formId2', 'bootstrap-table2')"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                                 <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('formId2', 'bootstrap-table2')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                             </li>
                                         </ul>
                                     </div>
                                 </form>
                             </div>

                             <div class="col-sm-12 select-table table-bordered">
                                 <table id="bootstrap-table2"></table>
                             </div>
                         </div>
                     </div>
                 </div>

             </div>

         </div>


    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('zsyh:serviceOrder:edit')}]];
        var removeFlag = [[${@permission.hasPermi('zsyh:serviceOrder:remove')}]];
        var orderStateDatas = [[${@dict.getType('order_state')}]];
        var orderTypeDatas = [[${@dict.getType('order_type')}]];
        var refuseDatas = [[${@dict.getType('zsyh_yesno')}]];
        var userTypeDatas = [[${@dict.getType('user_type')}]];
        var isPriorityDatas = [[${@dict.getType('sys_yes_no')}]];
        var prefix = ctx + "zsyh/serviceOrder";

        $(function() {
            var options = {
                id: "bootstrap-table",
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                modalName: "服务订单",
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                columns: [{
                    field : 'Number',
                    title : '序号',
                    align: 'center',
                    width: 20,
                    formatter : function(value, row, index) {
                        var pageSize = $('#bootstrap-table').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                        var pageNumber = $('#bootstrap-table').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                        return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                    }
                },
                    {
                        field: 'createTime',
                        align: 'center',
                        title: '下单时间'
                    },
                {
                    field: 'id',
                    title: '工单号',
                    align: 'center',
                },
                /*{
                    field: 'orderUserPhone',
                    align: 'center',
                    title: '下单人联系方式'
                },*/
                    {
                        field: 'userName',
                        align: 'center',
                        title: '订单联系人'
                    },
                    {
                        field: 'userPhone',
                        align: 'center',
                        title: '订单联系电话'
                    },
                {
                    field: 'userAddress',
                    align: 'center',
                    title: '详细地址'
                },
                    {
                        field: 'orderFrozenMoney',
                        align: 'center',
                        title: '冻结金额'
                    },{
                        field: 'orderMoneyallFactory',
                        align: 'center',
                        title: '厂家付款总金额'
                    },
                    {
                        field: 'orderMoneyallRepair',
                        align: 'center',
                        title: '师傅结算总金额'
                    },
                /*{
                    field: 'serviceName',
                    align: 'center',
                    title: '故障类型'
                },*/
               /* {
                    field: 'faultComment',
                    align: 'center',
                    title: '故障说明'
                },*/
                {
                    field: 'orderState',
                    align: 'center',
                    title: '工单状态',
                    formatter: function(value, row, index) {
                       return $.table.selectDictLabel(orderStateDatas, value);
                    }
                },{
                        field: 'orderType',
                        align: 'center',
                        title: '工单分类',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(orderTypeDatas, value);
                        }
                    },
                /*{
                    field: 'userType',
                    align: 'center',
                    title: '用户类型',
                    formatter: function(value, row, index) {
                       return $.table.selectDictLabel(userTypeDatas, value);
                    }
                },*/
                /*{
                    field: 'orderNumber',
                    align: 'center',
                    title: '维修数量'
                },*/
                /*{
                    field: 'cancelRemark',
                    align: 'center',
                    title: '取消订单备注'
                },*/
                /*{
                    field: 'orderFixdraw',
                    align: 'center',
                    title: '固定抽成的费用'
                },*/
                {
                    field: 'repairStoreName',
                    align: 'center',
                    title: '接单师傅'
                },
                    {
                        field: 'repairStorePhone',
                        align: 'center',
                        title: '师傅电话'
                    },
                /*{
                    field: 'orderImage',
                    align: 'center',
                    title: '上传图片'
                },*/
                /*{
                    field: 'isPriority',
                    align: 'center',
                    title: '是否加急',
                    formatter: function(value, row, index) {
                       return $.table.selectDictLabel(isPriorityDatas, value);
                    }
                },*/
                /*{
                    field: 'orderEvaluateScore',
                    title: '服务评分'
                },
                {
                    field: 'orderEvaluateContent',
                    title: '服务评价内容'
                },
                {
                    field: 'orderEvaluateImage',
                    title: '服务评价图片'
                },*/

                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        if(row.orderType == '1'){
                            //个人订单
                            actions.push('<a class="btn btn-warning btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="viewServiceOrderPerson(\'' + row.id + '\')"><i class="fa fa-edit"></i>查看详情</a> ');
                        }else{
                            actions.push('<a class="btn btn-warning btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="viewServiceOrder(\'' + row.id + '\')"><i class="fa fa-edit"></i>查看详情</a> ');
                        }
                        actions.push('<a class="btn btn-info btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="viewOrderLog(\'' + row.id + '\')"><i class="fa fa-search"></i>工单跟踪记录</a> ');
                        if(row.orderState =='201'){
                            //平台待审核状态需要审核
                            actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="reviewServiceOrder(\'' + row.id + '\')"><i class="fa fa-edit"></i>平台审核</a> ');
                        }
                        if(row.orderState =='203'){
                            //平台待拨款状态需要拨款
                            actions.push('<a class="btn btn-danger btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="settleServiceOrder(\'' + row.id + '\')"><i class="fa fa-edit"></i>平台结算</a> ');
                        }
                        if(row.orderState =='5'){
                            //已取消订单可以删除
                            /*actions.push('<a class="btn btn-info btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="viewImage(\'' + row.id + '\')"><i class="fa fa-search"></i>查看图片</a> ');*/
                            actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        }

                        if(row.orderState == "0" || row.orderState == "501"){
                            actions.push('<a class="btn btn-primary btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="cancelOrder(\'' + row.id + '\')"><i class="fa fa-edit"></i>取消订单</a> ');
                        }
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });

        $(function() {
            var options = {
                id: "bootstrap-table2",
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                modalName: "服务订单",
                firstLoad: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                columns: [{
                    field : 'Number',
                    title : '序号',
                    align: 'center',
                    width: 20,
                    formatter : function(value, row, index) {
                        var pageSize = $('#bootstrap-table').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                        var pageNumber = $('#bootstrap-table').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                        return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                    }
                },{
                    field: 'createTime',
                    align: 'center',
                    title: '下单时间'
                },
                    {
                        field: 'id',
                        title: '工单号',
                        align: 'center',
                    },
                    {
                        field: 'userName',
                        align: 'center',
                        title: '订单联系人'
                    },
                    {
                        field: 'userPhone',
                        align: 'center',
                        title: '订单联系电话'
                    },
                    {
                        field: 'userAddress',
                        align: 'center',
                        title: '详细地址'
                    },
                    {
                        field: 'orderFrozenMoney',
                        align: 'center',
                        title: '冻结金额'
                    },/*{
                        field: 'appendMoney',
                        align: 'center',
                        title: '追加费用'
                    },*/{
                        field: 'repairCheckMoney',
                        align: 'center',
                        title: '检测费'
                    },{
                        field: 'orderMoneyRepair',
                        align: 'center',
                        title: '服务费'
                    },{
                        field: 'orderMoneyallFactory',
                        align: 'center',
                        title: '厂家付款总金额'
                    },
                    {
                        field: 'orderMoneyallRepair',
                        align: 'center',
                        title: '师傅结算总金额'
                    },
                    {
                        field: 'orderState',
                        align: 'center',
                        title: '工单状态',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(orderStateDatas, value);
                        }
                    },{
                        field: 'orderType',
                        align: 'center',
                        title: '工单分类',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(orderTypeDatas, value);
                        }
                    },{
                        field: 'refuseRepair',
                        align: 'center',
                        title: '是否拒修',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(refuseDatas, value);
                        }
                    },
                    {
                        field: 'repairStoreName',
                        align: 'center',
                        title: '接单师傅'
                    },
                    {
                        field: 'repairStorePhone',
                        align: 'center',
                        title: '师傅电话'
                    },

                    {
                        field: 'orderReminderState',
                        align: 'center',
                        title: '催单状态'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            /*if(row.orderType == '1'){
                                //个人订单
                                actions.push('<a class="btn btn-warning btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="viewServiceOrderPerson(\'' + row.id + '\')"><i class="fa fa-edit"></i>查看详情</a> ');
                            }else{*/
                                actions.push('<a class="btn btn-warning btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="viewServiceOrder(\'' + row.id + '\')"><i class="fa fa-edit"></i>查看详情</a> ');
                            /*}*/
                            if(row.orderState =='203'){
                                //平台待拨款状态需要拨款
                                actions.push('<a class="btn btn-danger btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="settleServiceOrder(\'' + row.id + '\')"><i class="fa fa-edit"></i>平台结算</a> ');
                            }
                            if(row.orderReminderState == '催单未处理'){
                                //个人订单
                                actions.push('<a class="btn btn-danger btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="dealReminderOrder(\'' + row.id + '\')"><i class="fa fa-edit"></i>催单处理</a> ');
                            }
                            actions.push('<a class="btn btn-info btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="viewOrderLog(\'' + row.id + '\')"><i class="fa fa-search"></i>工单跟踪记录</a> ');
                            return actions.join('');
                        }
                    }]
            };
            $.table.init(options);
        });


        function settleServiceOrder(id) {
            $.modal.openTab("结算工单",prefix + "/settle/"+id,function () {
                setTimeout(function() {
                    location.reload();
                },500);
            });
        }

        function viewOrderLog(id) {
            $.modal.openTab("工单跟踪记录",ctx + "zsyh/serviceOrderLog/listLog/"+id);
        }

        function reviewServiceOrder(id) {
            $.modal.openTab("审核已完结工单",prefix + "/review/"+id,function () {
                setTimeout(function() {
                    location.reload();
                },500);
            });
        }

        function viewServiceOrder(id) {
            $.modal.openTab("查看工单详情",prefix + "/edit/"+id+"/2");
        }

        function viewServiceOrderPerson(id) {
            $.modal.openTab("查看工单详情",prefix + "/edit/"+id+"/1");
        }

        function viewImage(id) {
            var url = prefix + "/viewImage/"+id;
            layer.open({
                type: 2,
                area: [$(window).width()/1.5 + 'px', ($(window).height() - 50) + 'px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: "查看图片",
                content: url,
                btnClose: 1,
                // 弹层外区域关闭
                shadeClose: true,
                yes: function(index, layero) {
                    debugger;
                    var iframeWin = layero.find('iframe')[0];
                    /*var imageUrl = layero.find('iframe')[0].contentWindow.$("#imageUrl").val();*/
                    iframeWin.contentWindow.submitHandler(index, layero);
                },
                cancel: function(index) {
                    return true;
                }
            });
        }

        function cancelOrder(id) {
            var url = prefix + '/cancelOrder/'+id;
            layer.open({
                type: 2,
                area: [$(window).width()/2 + 'px', '350px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: "取消订单",
                content: url,
                closeBtn: 1,
                /*btn: ['通过', '驳回'],*/
                // 弹层外区域关闭
                shadeClose: true,
                yes: function(index, layero) {
                    debugger;
                    var iframeWin = layero.find('iframe')[0];
                },
                cancel: function(index) {
                    return true;
                }
            });
        }

        /*function viewDetail(id) {
            var url = prefix + "/edit/"+id;
            layer.open({
                type: 2,
                area: [($(window).width()-50) + 'px', ($(window).height()-50) + 'px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: "查看详情",
                content:  url,
                closeBtn: 1,
                // 弹层外区域关闭
                shadeClose: true,
                end: function(){
                    //location.reload();
                },
                cancel: function(index) {
                    //location.reload();
                }
            });
        }*/

        function changeTypeAll() {
            $.form.reset('formId', 'bootstrap-table');
            $("#bootstrap-table").bootstrapTable('refresh',{url:prefix + "/list"});
        }

        function changeType(type) {
            $.form.reset('formId2', 'bootstrap-table2');
            $("#bootstrap-table2").bootstrapTable('refresh',{url:prefix + "/list?orderType="+type});
        }

        function changeReminder(type) {
            $.form.reset('formId2', 'bootstrap-table2');
            $("#bootstrap-table2").bootstrapTable('refresh',{url:prefix + "/list?orderReminderState="+type});
        }

        function dealReminderOrder(id) {
            layer.open({
                type: 2,
                area: ['800px', '300px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: "催单记录",
                content: ctx + "zsyh/serviceOrderLog/add1/"+id,
                btnClose: 1,
                btn: ['确定','取消'],
                // 弹层外区域关闭
                shadeClose: true,
                yes: function(index, layero) {
                    var iframeWin = layero.find('iframe')[0];
                    iframeWin.contentWindow.submitHandler(index, layero);
                },
                cancel: function(index) {
                    return true;
                }
            });
        }

    </script>
</body>
</html>